<template>
	<view class="home-index">
		<view class="home-title">
			板桥汽渡综合服务
		</view>
		<view class="list-list">
			<view class="list-item list-item-01" @click="navTo('/pages/message/index')">
				<view class="home-icon">
					<image src="../../../static/image/icon-01.png"></image>
				</view>
				<view class="home-name">通航信息</view>
				<view class="icon-arrow"><image src="../../../static/image/index-arrow.png"></image></view>
			</view>
			<view class="list-item list-item-02" @click="navTo('/pages/weight/index')">
				<view class="home-icon">
					<image src="../../../static/image/icon-02.png"></image>
				</view>
				<view class="home-name">限重信息</view>
				<view class="icon-arrow"><image src="../../../static/image/index-arrow.png"></image></view>
			</view>
			<view class="list-item list-item-03"  @click="navTo('/pages/cost/index')">
				<view class="home-icon">
					<image src="../../../static/image/icon-03.png"></image>
				</view>
				<view class="home-name">收费信息</view>
				<view class="icon-arrow"><image src="../../../static/image/index-arrow.png"></image></view>
			</view>
			<view class="list-item list-item-04" @click="navTo('/pages/ask/index')">
				<view class="home-icon"><image src="../../../static/image/icon-04.png"></image></view>
				<view class="home-name">常见问题</view>
				<view class="icon-arrow"><image src="../../../static/image/index-arrow.png"></image></view>
			</view>
			<view class="clearfix"></view>
			<view class="list-big list-item-05"  @click="navTo('/pages/guest/index')">
				<view class="home-icon"><image src="../../../static/image/icon-05.png"></image></view>
				<view class="home-name">咨询留言</view>
				<view class="icon-arrow"><image src="../../../static/image/index-arrow.png"></image></view>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		components: {

		},
		data() {
			return {

			}
		},
		onLoad() {

		},
		bindGetUserInfo(e) {
			console.log(e.detail.userInfo)
		},
		created() {},
		onShow() {
			// indexStore

		},
		onPullDownRefresh() {

		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.clearfix {
		clear: both;
	}

	.home-index {
		.home-title {
			height: 59rpx;
			font-size: 42rpx;
			font-weight: 600;
			color: #323232;
			line-height: 59rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 30rpx auto 60rpx auto;
		}

		.list-list {
			.home-icon {
				padding-top: 30rpx;
				padding-left: 30rpx;
				margin-bottom: 16rpx;
				height: 40rpx;
				display: flex;
				align-items: center;

				image {
					height: 40rpx;
					width: 40rpx;
				}
			}

			.home-name {
				font-size: 34rpx;
				font-weight: 500;
				color: #323232;
				padding-left: 30rpx;
			}

			.list-item {
				width: 330rpx;
				height: 260rpx;
				float: left;
				margin-bottom: 30rpx;
				margin-left: 30rpx;
				position: relative;
				.icon-arrow{
					position: absolute;
					left: 30rpx;
					bottom: 30rpx;
					image{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.list-item-01 {
				background: url('../../../static/image/home-01.png') no-repeat center center;
				background-size: 100% 100%;

			}

			.list-item-02 {
				background: url('../../../static/image/home-02.png') no-repeat center center;
				background-size: 100% 100%;
			}

			.list-item-03 {
				background: url('../../../static/image/home-03.png') no-repeat center center;
				background-size: 100% 100%;
			}

			.list-item-04 {
				background: url('../../../static/image/home-04.png') no-repeat center center;
				background-size: 100% 100%;
			}

			.list-item-05 {
				background: url('../../../static/image/home-05.png') no-repeat center center;
				background-size: 100% 100%;
			}

			.list-big {
				width: 690rpx;
				height: 260rpx;
				margin: 0 auto;
				position: relative;
				.icon-arrow{
					position: absolute;
					left: 30rpx;
					bottom: 30rpx;
					image{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
</style>
